<template>
	<view class="mylogin">
		<view class="my_head">
			<view class="avatar" v-if="showLoginText">
				<img :src="beforLoginImg" alt=""class="avatar">
			</view>
			<view class="avatar" v-else>
				<img :src="img" alt=""class="avatar">
			</view>
			<view class="login" @click="showLogin" v-if="showLoginText">
				登录
			</view>
			<view class="nickName login" v-else>
				{{nickName}}
			</view>
			<view class="text"  v-if="showLoginText">
				登录后可将数据同步到云端~
			</view>
			<view class="text" v-else>
				Hi,终于等到你~
			</view>
		</view>
		<!-- 登录弹出层 -->
		<u-popup 
		:show="isshowLogin" 
		mode="bottom" 
		round="8px"
		:safeAreaInsetBottom="false"
		@close="close" 
		@open="open">
			<view class="loginModal">
				<text class="login_text">登录账号更多惊喜等你发现</text>
				<u-image :showLoading="true" :src="src" width="80px" height="80px"></u-image>
				<text class="login_text_tips">------第三方账号登录------</text>
				<view class="login_icon">
					<u-icon name="qq-circle-fill" color="#00ccff" size="80" @click="loginToQQ"></u-icon>
					<u-icon name="weixin-circle-fill" color="#00cc00" size="80" @click="loginToWX"></u-icon>
				</view>
					<!-- <button type="primary" class="btn_login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button> -->
				<view class="login_agree">
					<u-checkbox-group>
					<u-checkbox  shape="circle" size="24" :checked="ischeckAgree" @change="changAgree"></u-checkbox>
						<view class="login_check_agree">
							同意女生记账
						<h5>《隐私政策》</h5>和
						<h5>《用户协议》</h5>
						</view>
					</u-checkbox-group>
				</view>
				<view class="login_close">
					<u-icon name="close" color="#ccc" size="40" @click="closeLogin"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let userImg='https://img2.baidu.com/it/u=3647216708,4098252510&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
	export default {
		data() {
			return {
				// 登录前头像
				beforLoginImg:'https://img1.baidu.com/it/u=1871058517,1505666378&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=530',
				// 名字
				nickName:'',
				// 显示登录
				showLoginText:true,
				// 头像
				img:'',
				// 展示登录弹出框
				isshowLogin: false,
				// token
				token: '',
				// 是否勾选同意协议
				ischeckAgree:false,
				// 登录图片
				src: 'https://img2.baidu.com/it/u=3647216708,4098252510&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375'
			};
		},
		onLoad(){
			let token = uni.getStorage('token')
			console.log(token)
			if(token=='123'){
				this.img=userImg
				this.showLoginText=false
				this.nickName="胖头鱼"
				this.isshowLogin=false
			}
		},
		methods: {
			setToken(){
				uni.setStorage({
					key:'token',
					data:'123',
				})
			},
			changAgree(){
				if(this.ischeckAgree){
					this.ischeckAgree = false
					return	
				}
				this.ischeckAgree = true 
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			getUserInfo(e){
				console.log(e)
			},
			// 显示登录模块
			showLogin() {
				this.isshowLogin=true
				// this.$request({
				// 	url: 'auth/loginByWeb',
				// 	method: 'POST',
				// 	data: {
				// 		username: this.form.username,
				// 		pwd: this.form.password
				// 	},
				// 	successCb: res => {
				// 		console.log(res)
				// 	},
				// })
			},
			// 显示toast
			showToast(){
				uni.showToast({
					title: '请同意女生记账《隐私政策》和《用户协议》',
					duration: 2000,
					icon:'none',
					position :'bottom'
				});
			},
			// 关闭登录模块
			closeLogin(){
				this.isshowLogin=false
			},
			// QQ登录
			loginToQQ(){		
				if(!this.ischeckAgree){
					this.showToast()
				}else{
					this.setToken()
					// console.log(1)
					this.img=userImg
					this.showLoginText=false
					this.nickName="胖头鱼"
					this.isshowLogin=false
				}
			},
		}
	}
</script>

<style lang="scss">
	.my_head {
		width: 100%;
		height: 360rpx;
		background-color: #FF82AB;
		padding: 105rpx 20rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #fff;
		align-self: center
	}

	.login {
		width: 120rpx;
		height: 30rpx;
		outline: none;
		border: 1px solid #fff;
		border-radius: 20rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 30rpx;
		color: #fff;
		align-self: center;
		margin: 20rpx 0;
	}

	.text {
		font-size: 24rpx;
		color: #fff;
		align-self: center
	}
	.loginModal{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		font-size: 24rpx;
		padding: 40rpx 0;
		position: relative;
	}
	.login_close{
		position: absolute;
		top: 40rpx;
		left: 40rpx;
	}
	.login_text_tips{
		color: #ccc;
	}
	.login_icon{
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.login_check_agree{
		display: flex;
		color: #ccc;
		font-size: 24rpx
	}
	.nickName{
		border:none
	}
	h5{
		color: #33ccff;
		font-weight: 300;
	}
	/deep/.u-image{
		margin: 40rpx 0;
	}
	/deep/.qq-circle-fill{
		margin-right: 30rpx;
	}
	/deep/.weixin-circle-fill{
		margin-left: 30rpx;
	}
</style>
